<template>
    <view class="content" v-if="isShow" @click="onClick">
        <view class="M"></view>
        <view class="box">
            <image :src="imgUrl"></image>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },

    props: {
        isShow: false,
        imgUrl: {
            type: String,
            default: ""
        }
    },

    watch: {

    },

    methods: {
        onClick() {
            this.$emit("onClick",false)
        }
    },
}
</script>

<style lang="less" scoped>
.content {
    position: fixed;
    top: 0;
    left: 0;

    .M {
        width: 100vw;
        height: 100vh;
        background-color: #000;
        // opacity: 0.7;
    }

    .box {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        image {
            width: 100%;
        }
    }
}
</style>